<template>
	<view class="app-add-subtract dir-left-nowrap cross-center">
		<image class="app-icon" @click.stop="_calcValue('minus')"
			:src="inputValue <= 1 ? '/static/image/cart/unreducible.png' : '/static/image/icon/subtract.png'"></image>
		<!--		<view class="app-value">-->
		<input width="88rpx" height="60rpx" v-model="inputValue" class="text" @blur.stop="_onBlur" type="number">
		<!--		</view>-->
		<image class="app-icon" v-show="is_loading" @load="imgLoad" @click.stop="_calcValue('plus')"
			:src="inputValue >= stock ? '/static/image/cart/can-add.png' : '/static/image/icon/add-but.png'"
			:class="[ theme+ '-m-back', theme]"></image>
	</view>
</template>

<script>
	export default {
		name: 'app-add-subtract',
		data() {
			return {
				inputValue: 0,
				step: 1,
				disabled: false,
				is_loading: false,
			}
		},
		props: {
			value: {
				type: Number,
				default () {
					return 1;
				}
			},
			stock: {
				type: Number,
				default () {
					return 0;
				}
			},
			good_id: Number,
			theme: String
		},
		created() {
			this.inputValue = +this.value;
		},
		methods: {
			_calcValue(type) {
				if (this.disabled) {
					return;
				}
				const scale = this._getDecimalScale();
				let value = this.inputValue * scale;
				let step = this.step * scale;
				if (type === "minus") {
					value -= step;
				} else if (type === "plus") {
					value += step;
				}
				if (value < 1 || value > this.stock) {
					return;
				}
				this.inputValue = String(value / scale);
			},

			_getDecimalScale() {

				let scale = 1;
				// 浮点型
				if (~~this.step !== this.step) {
					scale = Math.pow(10, (this.step + "").split(".")[1].length);
				}
				return scale;
			},

			_onBlur(event) {

				let value = event.detail.value;
				if (!value) {
					// this.inputValue = 0;
					return;
				}
				value = +value;
				if (value > this.stock) {
					value = this.stock;
				} else if (value < 1) {
					value = 1;
				}
				this.inputValue = value;
			},

			imgLoad() {
				this.is_loading = true;
			}
		},
		watch: {
			value: {
				handler(val) {
					this.inputValue = +val;
				}
			},
			inputValue(newVal, oldVal) {
				if (+newVal !== +oldVal) {
					this.$emit("change", newVal, this.good_id);
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.app-add-subtract {
		height: #{60rpx};

		.app-icon {
			height: #{44rpx};
			width: #{44rpx};
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.app-unreducible {
			background-image: url("../../../../static/image/cart/unreducible.png");
		}

		.app-not-add {
			background-image: url("../../../../static/image/cart/can-add.png");
		}

		.app-can-add {
			background-image: url("../../../../static/image/icon/add-but.png");
		}

		.app-can-be-reduced {
			background-image: url("../../../../static/image/icon/subtract.png");
		}

		.text {
			line-height: #{60upx};
			height: #{60rpx};
			width: #{88rpx};
			font-size: #{21rpx};
			color: #353535;
			background-color: #ffffff;
			text-align: center;
			vertical-align: middle;
			padding: 0;
		}

	}
</style>
